import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb, Modal, Input, message } from 'antd';
import RouterViews from '../../router/router.fun.js'
import home from './index.module.css'
const { SubMenu } = Menu;
const { Sider } = Layout;
class Home extends Component {
  state = {
    nav: [],
    defaultSub: ['sub1'],
    s: '1',
    work: ['工作台', ''],
    user: localStorage.name,
    visible: false,
    list: [],
    ldpwd: '',//当前的旧密码
    newpwd: '',
    znewpwd: ''
  }
  // 点击
  add = (path, id, key, belongTitle, menuName) => {

    let a = [belongTitle, menuName]
    this.setState({ work: a })
    this.asd(key)
    this.props.history.push(path)
  }
  asd = key => {
    this.setState({ s: key + '' })
  }
  // 控制页面刷新
  pageRefresh = (id, key) => {
    //id 为sub  key为 select
    this.setState({ s: key + '', defaultSub: [id] })
  }
  componentDidMount() {
    let path = this.props.location.pathname
    this.$httpReq(this.$api.menu(), res => {
      let a = this.dealMenu(res.data);
      a.forEach(item => {
        item.sub.forEach(j => {
          if (j.path === path) {
            let a = [item.belongTitle, j.menuName]
            this.setState({ work: a })
            // console.log(item.belongTitle, j.menuName)
            this.pageRefresh(item.id, j.key)
          }
        })
      })
      this.setState({ nav: a })
    })


    this.$httpReq(this.$api.userList(), res => {
      this.setState({ list: res.data })
    })
  }
  dealMenu = menuData => {
    let data = [];
    let num = 1;
    menuData && menuData.forEach(item => {
      let index = data.findIndex(k => k.belongTitle === item.belongTitle)
      if (index !== -1) {
        data[index].sub.push({
          key: item.key,
          menuName: item.menuName,
          path: item.path
        })
        return
      }
      data.push({
        id: "sub" + num,
        belongTitle: item.belongTitle,
        grade: item.grad,
        belongIcon: item.belongIcon,
        sub: [{
          key: item.key,
          menuName: item.menuName,
          path: item.path
        }]
      })
      num++
    })
    return data
  }
  // 退出按钮
  edit = () => {
    localStorage.clear()
    this.$httpReq(this.$api.loginOut(), res => {
      this.success(res.msg)
    })
    this.props.history.push('/login')

  }

  //错误提示
  USERNAME = (a) => {
    message.error(a);
  }
  // 修改密码
  showModal = () => {

    this.setState({
      visible: true,
    });
  };
  //确定了
  handleOk = e => {

    const { list, ldpwd, newpwd, znewpwd } = this.state
    let newList = list.filter(item => item.userName === localStorage.user)

    let userid = newList[0].userid;
    if (newList[0].pwd !== ldpwd) {
      let a = '必须是当前密码'
      this.USERNAME(a)
      return
    }
    if (/^[A-Za-z_][A-Za-z0-9_]{5,7}$/.test(newpwd) === false) {
      this.setState({ newpwd: '', znewpwd: '' });
      let a = '新密不能为空,必须字母开头，六位到八位'
      this.USERNAME(a)
      return
    }
    if (newpwd === ldpwd) {
      let a = '新密码不能和之前密码重复'
      this.USERNAME(a)
      this.setState({ newpwd: '', znewpwd: '' });
      return
    }
    if (znewpwd !== newpwd) {
      let a = '密码不相同请重新输入'
      this.USERNAME(a)
      this.setState({ newpwd: '', znewpwd: '' });
      return
    }
    let obj = {
      userid,
      newPwd: znewpwd,
    }
    console.log(obj)
    this.$httpReq(this.$api.setPwd(obj), res => {
      localStorage.clear()
      let a = '密码修改成功请重新登录'
      this.success(a)
      this.props.history.push('/login')
    })
    this.setState({
      visible: false, ldpwd: ''
    });

  };
  // 重新登录
  success = (a) => {
    message.success(a);
  };
  //取消
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };
  render() {
    const { nav, defaultSub, s, work, user, znewpwd, ldpwd, newpwd } = this.state
    return <div className={home.h_box}>
      {/* header区域 */}
      <div className={home.h_header}>
        <div className={home.h_zt}>振涛教育考务管理后台</div>
        <div className={home.h_zt_right}>
          <div style={{ width: 80 }}>{user}</div> |
          <div style={{ width: 80 }} onClick={() => this.showModal()}>修改密码</div>|
          <div style={{ width: 80 }} onClick={() => this.edit()}>退出</div>
        </div>
      </div>

      {/* nav区域 */}
      <div className={home.center_nav}>
        <Sider style={{ height: '86vh', overflowY: 'scroll', backgroundColor: 'white' }} className={Home.sider}>
          <Menu
            mode="inline"
            selectedKeys={[s]}
            openKeys={defaultSub}
            onOpenChange={openKeys => {
              this.setState({ defaultSub: [...openKeys] })
            }}
            style={{ height: '100%', borderRight: 0 }}
          >
            {
              nav.map(item => {
                let Icons = this.$icon[item.belongIcon];
                if (item.sub.length < 2) return <Menu.Item key={item.sub[0].key} icon={<Icons />} onClick={() => this.add(item.sub[0].path, item.id, item.sub[0].key, item.belongTitle, item.sub[0].menuName)}>{item.belongTitle}</Menu.Item>
                return <SubMenu key={item.sub[0].key} title={item.belongTitle} icon={<Icons />} >
                  {
                    item.sub.map(jtem => <Menu.Item key={jtem.key} onClick={() => this.add(jtem.path, item.id, jtem.key, item.belongTitle, jtem.menuName)}>{jtem.menuName}</Menu.Item>)
                  }
                </SubMenu>
              })
            }

          </Menu>
        </Sider>
      </div>
      {/* className="site-layout-background" */}
      {/* 面包屑导航 */}
      <div className={home.center_ctx}>
        <div className={home.content_box}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            {
              work.map((item, key) => {
                return <Breadcrumb.Item key={key}>{item}</Breadcrumb.Item>
              })
            }
          </Breadcrumb>

          <RouterViews routers={this.props.routers}></RouterViews>
        </div>
      </div>

      <Modal
        title="更改密码"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <div className={home.change_one}>
          <p>请输入旧密码</p>
          <Input.Password style={{ width: 250 }} value={ldpwd} onChange={e => this.setState({ ldpwd: e.target.value })} placeholder="请输入旧密码" />
        </div>
        <div className={home.change_one} >
          <p >请输入新密码</p>
          <Input.Password style={{ width: 250 }} value={newpwd} onChange={e => this.setState({ newpwd: e.target.value })} placeholder="请输入新密码" />
        </div>
        <div className={home.change_one}>
          <p>请确认密码</p>
          <Input.Password style={{ width: 250 }} value={znewpwd} onChange={e => this.setState({ znewpwd: e.target.value })} placeholder="请确认密码" />
        </div>
      </Modal>
    </div>



  }
}
export default Home










